<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="24">
            <a-form-model-item label="模型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input :disabled="formDisabled" v-model="model.name" placeholder="请输入模型名称"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="16">
            <a-form-model-item
              label="导入定义类目"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="importDefinitionCategory"
            >
              <div class="computing_box" :class="formDisabled ? 'onlyRead' : ''">
                <draggable
                  class="datinfobox"
                  v-model="salaryFormula"
                  group="site"
                  animation="300"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  @start="onStart"
                  @end="onEnd"
                >
                  <transition-group>
                    <div class="computing_info" v-for="(item, key) in salaryFormula" :key="item.id">
                      <div class="computing_name">
                        {{ item.name }}
                      </div>
                      <div class="computing_close" @click="closeClick(key)">
                        <a-icon type="close" />
                      </div>
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <div class="salary_box salarydist" :class="formDisabled ? 'onlyRead' : ''">
              <div
                class="salary_box_info salary"
                v-for="(item, key) in dictOptions"
                :key="key"
                @click="salaryClick(item, key)"
              >
                {{ item.name }}
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
              <span style="display: flex; margin-bottom: 5px; justify-content: space-between">
                <span style="color: rgba(0, 0, 0, 0.85); font-size: 14px">模板预览:</span>
                <div>
                  <a-button @click="generate" :disabled="formDisabled"> 生成模板 </a-button>
                  <a-button style="margin-left: 20px" :disabled="formDisabled" @click="preview"> 全屏预览 </a-button>
                </div>
              </span>
              <erp-model-management-modal @closefullScreen="closefullScreen" :fullScreen="fullScreen" ref="realForm" normal></erp-model-management-modal>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea :disabled="formDisabled" v-model="model.remark" rows="4" placeholder="请输入备注"  :max-length="500"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import draggable from 'vuedraggable'
import ErpModelManagementModal from './ErpModelManagementModal'

export default {
  name: 'ErpSalaryModelManagementForm',
  components: {
    draggable,
    ErpModelManagementModal,
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      salaryFormula: [],
      dictOptions: [],
      model: {},
      labelCol: {},
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      confirmLoading: false,
      validatorRules: {
        name: [{ required: true, message: '请输入模型名称!' }],
        importDefinitionCategory: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.model.importDefinitionCategory) {
                callback()
              } else {
                callback('请输入导入定义类目!')
              }
            },
          },
        ],
      },
      url: {
        listDetails: '/api/erp/hr/payment/erpRemunerationCategoryDefinition/listDetails',
        add: '/api/erp/hr/payment/erpSalaryModelManagement/add',
        edit: '/api/erp/hr/payment/erpSalaryModelManagement/edit',
        queryById: '/api/erp/hr/payment/erpSalaryModelManagement/queryById',
      },
      fullScreen: false,  //设置当前全屏状态的初始值为 false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    preview() {
      this.calculate()
      this.fullScreen = true
    },
    closefullScreen() {
      this.fullScreen = false
    },
    generate() {
      const importDefinitionCategory = this.calculate()
      this.$refs.realForm.loadData(importDefinitionCategory);
    },
    onStart() {
    },
    onEnd() {
    },
    calculate() {
      let centerData = []
      this.salaryFormula.forEach((item, index) => {
        centerData.push(item.id)
      })
      this.model.importDefinitionCategory = centerData.toString()
      return this.model.importDefinitionCategory
    },
    closeClick(key) {
      this.dictOptions.unshift(this.salaryFormula.splice(key, 1)[0])
    },
    salaryClick(item, key) {
      this.salaryFormula.push(item)
      this.dictOptions.splice(key,1)
    },
    findDictOptions() {
      const that = this
      getAction(that.url.listDetails).then((res) => {
        if (res.success) {
          that.$refs.realForm.loadData(that.model.importDefinitionCategory);
          if(that.model.computingFormulaJson) {
            that.salaryFormula = JSON.parse(that.model.computingFormulaJson)
          }
          if(that.model.importDefinitionCategory) {
            let str = that.model.importDefinitionCategory.split(",")
            that.dictOptions = res.result.filter(function (item) {
              if(str.indexOf(item.id) < 0) {
                  return item;
              }
            })
          } else {
            that.dictOptions = res.result
            that.salaryFormula = []
          }
          that.visible = true
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.$refs.form.resetFields()
      this.model = Object.assign({}, record)
      this.findDictOptions()
    },
    submitForm() {
      this.calculate()
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          this.model.computingFormulaJson = JSON.stringify(this.salaryFormula)
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
<style scoped>
.operator {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.salary_box {
  height: 168px;
  margin-top: 35px;
}
.salarydist {
  overflow-y: scroll;
  border: 1px solid #eee;
}
.computing_box {
  min-height: 150px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  height: 165px;
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 5px;
  box-sizing: border-box;
}
.datinfobox {
  width: 100%;
  height: 100%;
}
.datinfobox span {
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
}
.computing_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #eee;
  height: 30px;
  border-radius: 20px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
}
.computing_name {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 5px;
  color: #333;
  height: 30px;
}
.computing_close {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #eee;
}
.salary {
  cursor: pointer;
}
.salary:hover {
  background-color: #eee;
}
.onlyRead {
  pointer-events: none;
}
</style>
